import React, { Component } from 'react'
import { Table, Button, Modal, Form, Input, message, Select, Checkbox, Row, Col } from 'antd';
import { manager, perm, role } from '../../../api/index'
import styles from './index.less'
export default class List extends Component {
    state = {
        data: [],
        isModalVisible: false,
        text: {},
        loading: false,
        disabled: false,
        permList: [],
        role: []
    }
    componentDidMount() {
        this.getData()
    }
    getData = async () => {
        const { data } = await manager.getManagerList()
        const dataArray = data.filter(item => item.status === 'y')
        console.log(dataArray)
        this.setState({ data: dataArray })
        const roleData = await role.getRoleList()
        this.setState({ role: roleData.data })
        console.log(this.state.role);
    }
    // 修改
    alterAccount = async (text) => {
        console.log(text);
        this.setState({ text })
        const permList = await perm.getList()
        this.setState({ permList: permList.data.filter(item => item.parentId === 0) })
        setTimeout(() => {
            this.formIns.setFieldsValue(text);
        }, 100)
        this.setState({ isModalVisible: true })
    }
    handleCancel = () => {
        this.setState({ isModalVisible: false })
    };
    onFinish = async (value) => {
        console.log(value);
        const data = await manager.updateManager(value)
        message.info(data.code === 200 ? "修改成功!" : "修改失败!");
        this.setState({ isModalVisible: false })
        this.getData()
    }
    // 删除
    info = async (text) => {
        const { id } = text
        this.setState({ disabled: true })
        console.log(id);
        const data = await manager.delManager(id)
        message.info(data.code === 200 ? "删除成功!" : "删除失败!");
        this.setState({ disabled: false })
        this.getData()

    };
    // 禁用
    status = async (text) => {
        const { id } = text
        this.setState({ disabled: true })
        console.log(id);
        const data = await manager.delManager(id)
        message.info(data.code === 200 ? "禁用成功!" : "禁用失败!");
        this.setState({ disabled: false })
        this.getData()
    }
    render() {

        const columns = [
            {
                title: 'id',
                dataIndex: 'id',
                width: '20%',
                align: 'center'
            },
            {
                title: 'account',
                dataIndex: 'account',
                width: '20%',
                align: 'center'
            },
            {
                title: 'password',
                dataIndex: 'password',
                width: '20%',
                align: 'center'
            },
            {
                title: 'roleId',
                dataIndex: 'roleId',
                width: '20%',
                align: 'center',
                render: (text) => {
                    for (let i = 0; i < this.state.role.length; i++) {
                        if (text === this.state.role[i].id) {
                            return (this.state.role[i].name)
                        }
                    }
                }
            },
            {
                title: 'operation',
                render: (text) => (
                    <div>
                        <Button type='dashed' onClick={() => this.info(text)} disabled={this.state.disabled}>删除</Button>
                        <Button style={{ marginLeft: '20px' }} type='primary' onClick={() => this.alterAccount(text)} disabled={this.state.disabled}>修改</Button>
                        <Button style={{ marginLeft: '20px' }} type='danger' onClick={() => this.status(text)} disabled={this.state.disabled}>禁用</Button>
                    </div>
                ),
                width: '251px',
                align: 'center'
            },
        ];
        return (
            <div >
                <h4 style={{ margin: '20px' }} >管理员列表</h4>
                <Table columns={columns} dataSource={this.state.data} size="middle" scroll={{ y: "507px" }} pagination={false} rowKey="id" />
                <Modal
                    title="修改管理员"
                    visible={this.state.isModalVisible}
                    onCancel={this.handleCancel}
                    style={{ textAlign: 'center' }}
                    footer={null}
                >
                    <Form layout="vertical"
                        onFinish={this.onFinish}
                        ref={(ins) => this.formIns = ins}
                    >
                        <Form.Item label="id:"
                            name="id">
                            <Input disabled />
                        </Form.Item>
                        <Form.Item label="account:"
                            name="account"
                            rules={[{ required: true, message: 'Please input your account!' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="password:"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item label="permIds:"
                            name="permIds"
                            rules={[{ required: true, message: 'Please input your permIds!' }]}
                        >
                            <Checkbox.Group style={{ width: '100%' }} onChange={this.onChange}>
                                <Row>
                                    {
                                        this.state.permList.map(item => {
                                            return (
                                                <Col span={6} key={item.id}>
                                                    <Checkbox value={item.id}>{item.name}</Checkbox>
                                                </Col>
                                            )
                                        })
                                    }
                                </Row>
                            </Checkbox.Group>
                        </Form.Item>
                        <Form.Item label="status:"
                            name="status"
                            rules={[{ required: true, message: 'Please input your roleId!' }]}
                        >
                            <Select placeholder='请选择'>
                                <Select.Option value="y">正常</Select.Option>
                                <Select.Option value="n">禁用</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="roleId:"
                            name="roleId"
                            rules={[{ required: true, message: 'Please input your roleId!' }]}
                        >
                            <Select placeholder='请选择'>
                                {
                                    this.state.role.map(item => {
                                        return (
                                            <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                                        )
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item >
                            <Button type="primary" htmlType="submit" loading={this.state.loading}>
                                确认修改
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
